<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>



    <style>
        #container {
            height: 350px;
            position: relative;
            overflow: hidden;
            border: red solid;
        }

        .photobanner {
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            white-space: nowrap;
            animation: bannermove 10s linear infinite;
        }

        .photobanner img {
            height: 300px;
        }

        @-webkit-keyframes bannermove{
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-50%, 0);
            }
        }
        @keyframes bannermove {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-50%, 0);
            }
        }
    </style>





    <div id="container">
        <div class="photobanner">
            <img src="img/Tesla (10).jpeg" alt="">
            <img src="img/Tesla (11).jpeg" alt="">
            <img src="img/Tesla (12).jpeg" alt="">
            <img src="img/Tesla (13).jpeg" alt="">

            <!--   它其实是两组相同的图片   -->

            <img src="img/Tesla (10).jpeg" alt="">
            <img src="img/Tesla (11).jpeg" alt="">
            <img src="img/Tesla (12).jpeg" alt="">
            <img src="img/Tesla (13).jpeg" alt="">

        </div>
    </div>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

        infinite-horizontal 滚动:

        在 safari 上存在兼容性:

    </xmp>


</body>

</html>